<template>
  <div>这是首页</div>
  <div ref="divRef">
    {{ count }}
  </div>
<router-link to="/test">测试页面</router-link>
  <button @click="changeAppName">修改app名称</button>
  <button @click="count++">增加数量</button>
  <button @click="handleClick">增加</button>
  <div class="grid grid-cols-2 gap-4">
    <div v-for="(item,index) in list" :key="index">{{ item.name }} {{ item.value }}</div>
  </div>

  <div><button @click="addTeacher">增加一个老师</button></div>
  <div>子组件-----------------</div>
  
  <Child v-model="count">
    <template #default="{ user }">
      <p>{{ user.name }}</p>
    </template>
  </Child>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick,provide } from "vue";
import { onBeforeRouteLeave } from 'vue-router';
import Child from "@/components/child.vue";
import { useAppStore } from "@/stores/index";

const appStore = useAppStore();


onBeforeRouteLeave ((to, from, next) => {
  alert('确定要离开吗？')
  next()
}) 
const list = ref([
  {
    id: 1,
    name: "张三",
    value: "123",
  },
  {
    id: 2,
    name: "李四",
    value: "123",
  },
  {
    id: 3,
    name: "王五",
    value: "123",
  },
  {
    id: 4,
    name: "风间老师",
    value: "123",
  },
  {
    id: 5,
    name: "仓老师",
    value: "123",
  },
]);

const title = ref("这是首页");

const divRef = ref<HTMLDivElement | null>(null);
const count = ref(0);

provide("count", count);


const changeAppName = () => {
  console.log(appStore.name);
  appStore.setName("新的app名称");
};

const addTeacher = () => {
  list.value.splice(2, 0, {
    id: list.value.length + 1,
    name: "新老师",
    value: "123",
  });
};
const handleClick = () => {
  if (!divRef.value) return;
  count.value++;
  console.log(divRef.value.textContent);
  count.value++;
  console.log(divRef.value.textContent);
  count.value++;
  console.log(divRef.value.textContent);
  count.value++;
  console.log(divRef.value.textContent);
  count.value++;
  console.log(divRef.value.textContent);
  nextTick(() => {
    if (!divRef.value) return;
    console.log(divRef.value.textContent);
  });
};
onMounted(() => {
  console.log(appStore.greeting)
});
</script>
